<template>
  <div class="container">
    <h3 style="text-align:center;">场地申请</h3>
    <hr />
    <div id="fieldApply_ruleForm" style="margin:auto;text-align:center;width:80%">
      <el-form
        :model="fieldApply_ruleForm"
        status-icon
        :rules="rules"
        ref="fieldApply_ruleForm"
        inline-message
        class="demo-ruleForm"
      >
        <el-form-item prop="campus">
          <span class="title">校区：</span>
          <el-button @click="openCampusList = true" type="text">
            <span v-if="campusSelect">{{campusSelect.name}}</span>
            <span v-else>未选择</span>
          </el-button>
        </el-form-item>
        <el-form-item prop="area">
          <span class="title">功能区：</span>
          <el-button @click="openAreaList = true" type="text">
            <span v-if="areaSelect">{{areaSelect.name}}</span>
            <span v-else>未选择</span>
          </el-button>
        </el-form-item>
        <el-form-item prop="field">
          <span class="title">场地：</span>
          <el-button @click="openFieldList = true" type="text">
            <span v-if="fieldSelect">{{fieldSelect.name}}</span>
            <span v-else>未选择</span>
          </el-button>
        </el-form-item>
        <el-form-item prop="application">
          <span class="title">申请理由：</span>
          <el-input
            v-model="fieldApply_ruleForm.application"
            style="width: 300px; text-align: left;"
          ></el-input>
        </el-form-item>
        <el-form-item prop="applicant">
          <span class="title">申请人：</span>
          <el-input v-model="fieldApply_ruleForm.applicant" style="width: 300px; text-align: left;"></el-input>
        </el-form-item>
        <el-form-item prop="telephone">
          <span class="title">电话：</span>
          <el-input v-model="fieldApply_ruleForm.telephone" style="width: 300px; text-align: left;"></el-input>
        </el-form-item>
        <el-form-item>
          <span style="width:80%;text-align:center;">
            <el-button type="primary" @click="submitForm('fieldApply_ruleForm')">提交</el-button>
            <el-button type="primary" @click="resetForm('fieldApply_ruleForm')">重置</el-button>
          </span>
        </el-form-item>
      </el-form>
      <!-- 场地筛选 -->
      <el-dialog title="选择场地" :visible.sync="openFieldList">
        <el-input placeholder="请输入关键字" v-model="fieldKeyword">
          <template slot="prepend">场地名称</template>
          <el-button slot="append" icon="el-icon-search" @click="getFieldByKeyword"></el-button>
        </el-input>
        <br />
        <br />
        <el-radio-group v-model="fieldSelect">
          <el-radio
            v-for="(field, index) in fieldList"
            :key="'field'+index"
            :label="field"
          >{{field.name}}</el-radio>
        </el-radio-group>
        <div slot="footer" class="dialog-footer">
          <el-button @click="fieldSelect = ''">清 空</el-button>
          <el-button type="primary" @click="openFieldList = false">确 定</el-button>
        </div>
      </el-dialog>
      <!-- 校区筛选 -->
      <el-dialog title="选择校区" :visible.sync="openCampusList">
        <el-input placeholder="请输入关键字" v-model="campusKeyword">
          <template slot="prepend">校区名</template>
          <el-button slot="append" icon="el-icon-search" @click="getCampusByKeyword"></el-button>
        </el-input>
        <br />
        <br />
        <el-radio-group v-model="campusSelect">
          <el-radio
            v-for="(campus, index) in campusList"
            :key="'campus' + index"
            :label="campus"
          >{{ campus.name }}</el-radio>
        </el-radio-group>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="campusSelect = ''">清 空</el-button>
          <el-button type="primary" @click="openCampusList = false">确 定</el-button>
        </div>
      </el-dialog>
      <!-- 功能区筛选 -->
      <el-dialog title="选择功能区" :visible.sync="openAreaList">
        <el-input placeholder="请输入关键字" v-model="areaKeyword">
          <template slot="prepend">功能区名</template>
          <el-button slot="append" icon="el-icon-search" @click="getAreaByKeyword"></el-button>
        </el-input>
        <br />
        <br />
        <el-radio-group v-model="areaSelect">
          <el-radio
            v-for="(area, index) in areaList"
            :key="'area' + index"
            :label="area"
          >{{ area.name }}</el-radio>
        </el-radio-group>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="areaSelect = ''">清 空</el-button>
          <el-button type="primary" @click="openAreaList = false">确 定</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
export default {
  name: "Add",
  data() {
    //电话号码验证
    var checkPhone = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("手机号不能为空"));
      } else {
        const reg = /^1[3|4|5|7|8][0-9]\d{8}$/;
        console.log(reg.test(value));
        if (reg.test(value)) {
          callback();
        } else {
          return callback(new Error("请输入正确的手机号"));
        }
      }
    };
    return {
      campusList: [], //校区列表
      openCampusList: false, //校区筛选框显示
      campusSelect: "", //选择的校区
      campusKeyword: "", //校区关键词

      areaList: [], //功能区列表
      openAreaList: false, //功能区筛选显示
      areaSelect: "", //选择的功能区
      areaKeyword: "", //关键词

      fieldList: [], //场地列表
      fieldSelect: "", //选择的场地
      openFieldList: false, //场地刷选显示
      fieldKeyword: "", //场地关键词

      //申请场地的表单
      fieldApply_ruleForm: {
        campus: "", //校区
        area: "", //功能区
        field: "", //场地
        application: "", //申请理由
        applicant: "", //申请人
        telephone: "", //联系电话
        create_time: new Date(), //申请时间(当前时间)
      },
      rules: {
        campus: [
          { required: true, message: "请选择校区名称", trigger: "submit" },
        ],
        area: [{ required: true, message: "请选择功能区", trigger: "submit" }],
        field: [{ required: true, message: "请选择场地", trigger: "submit" }],
        application: [
          { required: true, message: "请输入申请描述", trigger: "blur" },
        ],
        applicant: [
          { required: true, message: "请选择申请人", trigger: "blur" },
        ],
        telephone: [
          { required: true, validator: "checkPhone", trigger: "blur" },
        ],
      },
    };
  },
  created() {
    //获取功能区列表
    this.getAreaList();
    //获取校区列表
    this.getCampusList();
    //获取场地列表
    this.getFieldList();
  },
  methods: {
    //根据关键词搜索功能区
    getAreaByKeyword() {},

    //根据关键词搜索校区
    getCampusByKeyword() {},

    //根据关键词搜索场地
    getFieldByKeyword() {},

    //获取功能区列表
    getAreaList() {
      this.areaList = [
        {
          id: "12345",
          college_id: "123456789",
          school_id: "12345678",
          name: "第一教学楼",
          english_name: "The first teaching building",
          telephone: "18023649352",
          discription: "暂无描述",
          create_time: "2020-6-12 20:30:00",
          by_who: "（userid）",
        },
        {
          id: "12346",
          college_id: "123456789",
          school_id: "12345678",
          name: "第二教学楼",
          english_name: "The second teaching building",
          telephone: "18023649352",
          discription: "暂无描述",
          create_time: "2020-6-12 20:30:00",
          by_who: "（userid）",
        },
      ];
    },

    //获取校区列表
    getCampusList() {
      this.campusList = [
        { id: "1", name: "主校区" },
        { id: "2", name: "星湖校区" },
      ];
    },

    //获取场地列表
    getFieldList() {
      this.fieldList = [
        {
          id: "01", //编号
          name: "第一教学楼", //名称
          english_name: "", //英文名称
          telephone: "", //电话号码
          discription: "", //描述
          campus: { id: "01", name: "主校区", discription: "" }, //校区
          area: { id: "01", name: "美术楼", discription: "" }, //功能区
          fieldType: { id: "01", name: "室内", discription: "" }, //场地类型
          by_who: { id: "01", name: "张三" }, //负责人
          create_time: "", //创建时间
        },
        {
          id: "02",
          name: "第二教学楼",
          english_name: "",
          telephone: "",
          discription: "",
          campus: { id: "02", name: "星湖校区", discription: "" }, //校区
          area: { id: "02", name: "第一教学楼", discription: "" },
          fieldType: { id: "02", name: "室内", discription: "" },
          by_who: { id: "02", name: "李四" }, //创建者
          create_time: "",
        },
        {
          id: "03",
          name: "第三教学楼",
          english_name: "",
          telephone: "",
          discription: "",
          campus: { id: "03", name: "主校区", discription: "" }, //校区
          area: { id: "03", name: "实验楼", discription: "" },
          fieldType: { id: "03", name: "室内", discription: "" },
          by_who: { id: "03", name: "王五" }, //创建者
          create_time: "",
        },
      ];
    },

    //添加功能区提交
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert("submit!");
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },

    //表单重置
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
  },
};
</script>

<style scoped>
#container {
  width: 80%;
  margin: auto;
  font-size: 20px;
}
.el-form-item {
  height: 50px;
  line-height: 50px;
}
.title {
  display: inline-block;
  width: 150px;
  font-size: 20px;
  text-align: right;
}
.el-button span {
  display: inline-block;
  font-size: 20px;
  width: 300px;
  text-align: left;
}
</style>

